<template>
  <router-page class="container">
    <!-- table -->
    <ui-table v-bind="table.config" ref="table" class="content_container" @select-change="onSelectTableEntity">
      <!--   查询   -->
      <template v-slot:search-bar>
        <ui-table-select v-model="table.model.select" :reset="true">
                      <ui-table-select-item name="userId" label="系统用户ID" placeholder="请输入系统用户ID" show-label type="number" select="eq" start-null />
                              <ui-table-select-item name="roleId" label="所属客户ID" placeholder="请输入所属客户ID" show-label type="number" select="eq" start-null />
                    </ui-table-select>
      </template>
      <!--   操作   -->
      <template v-slot:tool-bar>
        <permission identity="Sys:SysUserRole:create">
          <el-button type="primary" icon="el-icon-plus" @click="handleEntityCreate">新增</el-button>
        </permission>
        <permission identity="Sys:SysUserRole:delete">
          <el-button type="primary" icon="el-icon-plus" @click="handleEntityDelete">删除</el-button>
        </permission>
        <permission identity="Sys:SysUserRole:export">
          <el-button type="primary" icon="el-icon-printer" @click="handleEntityExport">导出</el-button>
        </permission>
      </template>
      <ui-table-column type="selection"/>
      <ui-table-column prop="userId" label="系统用户ID"/>
      <ui-table-column prop="roleId" label="所属客户ID"/>
      <ui-table-column type="action" :buttons="table.buttons" :resizable="false"/>
      <!--   分页   -->
      <template v-slot:footer-bar>
        <ui-table-pagination/>
      </template>
    </ui-table>
    <!-- form -->
    <ui-form-dialog ref="form" :title="form.title" :url="form.url" :loading="entityGetLoading" :visible.sync="form.visible" class="entity-form" @after-submit="afterFormSubmit">
      <ui-form-item label="ID" name="id" type="hidden"/>
          <ui-form-item name="userId" label="系统用户ID" type="number" :min="1" :max="99" vtype="required"/>
              <ui-form-item name="roleId" label="所属客户ID" type="number" :min="1" :max="99" vtype="required"/>
        </ui-form-dialog>
  </router-page>
</template>
<script>
  const SysUserRole = {
    API: {
      create: '/Sys/SysUserRole/create',
      update: '/Sys/SysUserRole/update',
      delete: '/Sys/SysUserRole/delete',
      select: '/Sys/SysUserRole/select',
      export: '/Sys/SysUserRole/export',
      createList: '/Sys/SysUserRole/createList',
      updateList: '/Sys/SysUserRole/updateList',
      deleteList: '/Sys/SysUserRole/deleteList',
      selectList: '/Sys/SysUserRole/selectList',
      selectPage: '/Sys/SysUserRole/selectPage',
    },
    data() {
      return {
        api: SysUserRole.API,
        table: {
          config: {
            url: SysUserRole.API.selectPage,
          },
          model: {
            select: {},
          },
          buttons: [
            /*() => ({text: '新增', handle: this.handleEntityCreate, permission: `Sys:SysUserRole:create`}),*/
            () => ({text: '修改', handle: this.handleEntityUpdateRow, permission: `Sys:SysUserRole:update`}),
            /*() => ({text: '删除', handle: this.handleEntityDeleteRow, permission: `Sys:SysUserRole:delete`}),*/
          ],
        },
        form: {
          isCreate: true,
          title: '新增',
          url: SysUserRole.API.create,
          visible: false,
          rules: {},
        },
      };
    },
    methods: {
      onSelectTableEntity(selects) {
        if (selects.length <= 0) {
          return;
        }
        this.handleEntityUpdateRow(selects[selects.length - 1]);
      },
      handleEntityCreate() {
        this.form.isCreate = true;
        this.$refs.form.resetValues();
        this.form.title = '新增';
        this.form.url = this.api.create;
        this.form.visible = true;
      },
      handleEntityUpdate() {
        const sels = this.$refs.table.getSelection();
        if (sels.length !== 1) {
          this.$message.info('请选择要修改的数据');
          return;
        }
        this.handleEntityUpdateRow(sels[0]);
      },
      handleEntityDelete() {
        const sels = this.$refs.table.getSelection();
        if (sels.length <= 0) {
          this.$message.info('请选择要删除的数据');
          return;
        }
        this.deleteEntities(sels.map(item => item.id)).then(({success}) => {
          if (!success) {
            return;
          }
          this.reloadTable();
        });
      },
      handleEntityUpdateRow(row) {
        this.form.isCreate = false;
        this.form.title = '修改';
        this.form.url = this.api.update;
        this.form.visible = true;
        this.selectEntity(row.id).then(({success, data}) => {
          if (!success) {
            this.form.visible = false;
            return;
          }
          this.$refs.form.resetValues(data);
        });
      },
      handleEntityDeleteRow(row) {
        this.deleteEntity(row.id).then(({success}) => {
          if (!success) {
            return;
          }
          this.reloadTable();
        });
      },
      async handleEntityExport() {
        const loading = this.$loading({text: '数据加载中..'});
        const url = this.api.export;
        await this.$refs.table.exportEntity(url, '导出.xls');
        loading.close();
      },
      reloadTable() {
        this.$refs.table && this.$refs.table.reload();
      },
      afterFormSubmit({success}) {
        if (!success) {
          return;
        }
        this.form.visible = false;
        this.reloadTable();
      },
    },
  };
  export default SysUserRole;
</script>
<style lang="less" scoped>
</style>
